<template>
  <div class="step">
    <el-divider content-position="left"><h4>步骤:</h4></el-divider>
    
    <el-row v-for="step in steps" :key="step.menuId">
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" >
        <div class="grid-content bg-purple"><img :src="'/api/upload/'+ step.stepImg" alt="" /></div></el-col>
      <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
        <div class="grid-content bg-purple-light"> 
            <h5>步骤<b>{{step.stepOrder}}</b></h5>
            <p>{{step.stepContent}}</p></div>
      </el-col>
    </el-row>
    
  </div>
 
</template>
<script>
export default {
 data(){
     return{ 
         queryId:-1,
         steps:[]
        }
       
    },

     created() {
       this.queryId=this.$route.params.id
       this.$axios
      .get("/api/createMenu/getstep",{ params: { menuId: this.queryId}})
      .then((res) => {
        console.log("res:", res);
        this.steps = res.data.data;
      })
      .catch((err) => {
        console.log("err:", err);
      });
  },
 
}

</script>
<style lang="scss" scoped>
@import "../../css/menu/menuchild.css";
</style>